<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="取样日期" prop="sampleDate">
        <el-date-picker clearable v-model="queryParams.sampleDate" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择取样日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="取样流水号" prop="orderId">
        <el-input v-model="queryParams.orderId" placeholder="请输入取样流水号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="取样类型" prop="sampleType">
        <el-select v-model="queryParams.sampleType" placeholder="请选择取样类型" clearable>
          <el-option v-for="dict in dict.type.sample_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['product:SampleRetention:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['product:SampleRetention:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['product:SampleRetention:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['product:SampleRetention:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="SampleRetentionList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="取样流水号" align="center" prop="orderId" />
      <el-table-column label="批号" align="center" prop="batchNumber" />
      <el-table-column label="取样唯一标识" align="center" prop="sampleId" width="160" />
      <el-table-column label="留样唯一标识" align="center" prop="retentionId" width="160" />
      <el-table-column label="取样日期" align="center" prop="sampleDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sampleDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="取样类型" align="center" prop="sampleType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sample_type" :value="scope.row.sampleType" />
        </template>
      </el-table-column>
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="物料代号" align="center" prop="materialCode" />
      <el-table-column label="规格" align="center" prop="specification" />
      <el-table-column label="来源" align="center" prop="source" />
      <el-table-column label="生产日期" align="center" prop="productionDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="保质期" align="center" prop="shelfLife" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.shelfLife, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="储存条件" align="center" prop="storageCondition" />
      <el-table-column label="检验项目文件" align="center" prop="itemsUrl" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.itemsUrl">
            <a :href="url" target="_blank" class="download-link" v-for="(url, idx) in scope.row.itemsUrl.split(',')"
              :key="idx">
              <el-button size="mini" type="text" icon="el-icon-download" class="download-btn">下载</el-button>
            </a>
          </div>
          <span v-else class="no-file">无</span>
        </template>
      </el-table-column>

      <el-table-column label="留样类型" align="center" prop="isRetention">
        <template slot-scope="scope">
          <span>{{ scope.row.isRetention === 0 ? '普通留样' : '稳定性留样' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="留样量" align="center" prop="retentionQuantity" />
      <el-table-column label="留样领用量" align="center" prop="retentionUsedQuantity" />
      <el-table-column label="留样剩余量" align="center" prop="retentionRemainingQuantity" />
      <el-table-column label="留样至日期" align="center" prop="retentionEndDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.retentionEndDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="稳定性留样量" align="center" prop="stabilityRetentionQuantity" />
      <el-table-column label="稳定性留样领用量" align="center" prop="stabilityRetentionUsed" />
      <el-table-column label="稳定性留样剩余量" align="center" prop="stabilityRetentionRemaining" />
      <el-table-column label="稳定性留样至日期" align="center" prop="stabilityRetentionEndDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.stabilityRetentionEndDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="留样创建时间" align="center" prop="createdTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="取样人" align="center" prop="sampler" />
      <el-table-column label="留样人" align="center" prop="retainer" />
      <el-table-column label="备注" align="center" prop="remark" width="200" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['product:SampleRetention:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['product:SampleRetention:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 新增/修改弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" class="custom-form optimize-form">
        <!-- 基础信息 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="取样流水号">
              <el-input v-model="form.orderId" placeholder="请选择生产指令" readonly />
              <el-button type="primary" icon="el-icon-search" size="mini" @click="showOrderSelect = true">选择</el-button>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input v-model="form.productName" placeholder="请输入产品名称" />
            </el-form-item>

            <el-form-item label="物料代号">
              <el-input v-model="form.materialCode" placeholder="请选择物料" readonly />
              <!-- 修改点击事件，调用组件的show方法 -->
              <el-button type="primary" icon="el-icon-search" size="mini"
                @click="openMaterialSelectDialog">选择</el-button>
            </el-form-item>

            <el-form-item label="规格">
              <el-input v-model="form.specification" placeholder="请输入规格" />
            </el-form-item>
            <el-form-item label="来源">
              <el-input v-model="form.source" placeholder="请输入来源" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取样类型">
              <el-select v-model="form.sampleType" placeholder="请选择取样类型">
                <el-option v-for="dict in dict.type.sample_type" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生产日期">
              <el-date-picker clearable v-model="form.productionDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择生产日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="保质期">
              <el-date-picker clearable v-model="form.shelfLife" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择保质期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="取样日期">
              <el-date-picker clearable v-model="form.sampleDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择取样日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 数量与储存信息 -->
        <el-row :gutter="20" class="form-row">

          <el-col :span="12">
            <el-form-item label="储存条件">
              <el-input v-model="form.storageCondition" placeholder="请输入储存条件" />
            </el-form-item>
            <el-form-item label="检验项目文件">
              <FileUpload v-model="form.itemsUrl" :file-size="10"
                :file-type="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'txt']" :limit="1" :disabled="false"
                :data="{ bucketName: bucketName }" />
              <div class="el-form-item__help">支持上传检验相关的文档/表格，最多1个文件</div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 留样类型选择 -->
        <el-form-item label="留样类型">
          <el-select v-model.number="form.isRetention" placeholder="请选择留样类型" @change="handleRetentionTypeChange">
            <el-option label="普通留样" :value="0"></el-option> <!-- 加:绑定数字 -->
            <el-option label="稳定性留样" :value="1"></el-option> <!-- 加:绑定数字 -->
          </el-select>
        </el-form-item>

        <!-- 普通留样信息 -->
        <el-row class="form-row" v-if="form.isRetention === 0">
          <el-col :span="24">
            <div class="section-title">普通留样信息</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="form-row" v-if="form.isRetention === 0">
          <el-col :span="12">
            <el-form-item label="留样量">
              <el-input v-model.number="form.retentionQuantity" placeholder="请输入留样量"
                @input="calculateRetentionRemaining" />
            </el-form-item>
            <el-form-item label="留样领用量">
              <el-input v-model.number="form.retentionUsedQuantity" placeholder="请输入留样领用量"
                @input="calculateRetentionRemaining" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="留样剩余量">
              <el-input v-model.number="form.retentionRemainingQuantity" placeholder="留样剩余量" disabled />
            </el-form-item>
            <el-form-item label="留样至日期">
              <el-date-picker clearable v-model="form.retentionEndDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择留样至日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 稳定性留样信息 -->
        <el-row class="form-row" v-if="form.isRetention === 1">
          <el-col :span="24">
            <div class="section-title">稳定性留样信息</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="form-row" v-if="form.isRetention === 1">
          <el-col :span="12">
            <el-form-item label="稳定性留样量">
              <el-input v-model.number="form.stabilityRetentionQuantity" placeholder="请输入稳定性留样量"
                @input="calculateStabilityRemaining" />
            </el-form-item>
            <el-form-item label="稳定性留样领用量">
              <el-input v-model.number="form.stabilityRetentionUsed" placeholder="请输入稳定性留样领用量"
                @input="calculateStabilityRemaining" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="稳定性留样剩余量">
              <el-input v-model.number="form.stabilityRetentionRemaining" placeholder="稳定性留样剩余量" disabled />
            </el-form-item>
            <el-form-item label="稳定性留样至日期">
              <el-date-picker clearable v-model="form.stabilityRetentionEndDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择稳定性留样至日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 操作人与备注 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="取样人">
              <el-input v-model="form.sampler" placeholder="请输入取样人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="留样人">
              <el-input v-model="form.retainer" placeholder="请输入留样人" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 生产指令选择弹窗 -->
    <SelectOrder :visible.sync="showOrderSelect" @select="handleOrderSelect" title="选择生产指令" />

    <!-- 物料选择弹窗 - 确保.sync修饰符正确使用 -->
    <MaterialSelectDialog :visible.sync="showMaterialSelect" @material-selected="handleMaterialSelect" title="选择物料需求表"
      ref="materialDialog" />


  </div>
</template>

<script>
import { listSampleRetention, getSampleRetention, delSampleRetention, addSampleRetention, updateSampleRetention } from "@/api/product/SampleRetention"
import SelectOrder from "./SelectOrder.vue";
import FileUpload from "@/components/FileUpload/index.vue"
import MaterialSelectDialog from "./MaterialSelectDialog.vue";

export default {
  name: "SampleRetention",
  dicts: ['sample_type'],
  components: { SelectOrder, FileUpload, MaterialSelectDialog },
  data() {
    return {
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      SampleRetentionList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sampleDate: null,
        orderId: null,
        sampleType: null,
      },
      form: {
        id: null,
        sampleId: null,
        retentionId: null,
        sampleDate: null,
        orderId: null,
        sampleType: null,
        materialCode: null,
        productName: null,
        shelfLife: null,
        batchNumber: null,
        productionDate: null,
        specification: null,
        source: null,
        itemsUrl: null,
        storageCondition: null,
        isRetention: 0, // 0=普通留样，1=稳定性留样
        // 普通留样字段
        retentionQuantity: null,
        retentionUsedQuantity: 0,
        retentionRemainingQuantity: 0,
        retentionEndDate: null,
        // 稳定性留样字段
        stabilityRetentionQuantity: null,
        stabilityRetentionUsed: 0,
        stabilityRetentionRemaining: 0,
        stabilityRetentionEndDate: null,
        createdTime: null,
        sampler: null,
        retainer: null,
        remark: null,
        isDelete: 0
      },
      rules: {},
      showOrderSelect: false,
      selectedOrder: null,
      bucketName: "sample-retention",

      showMaterialSelect: false, // 物料选择弹窗控制
      selectedMaterial: null, // 选中的物料
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 新增：打开物料选择弹窗并触发请求
    openMaterialSelectDialog() {
      // 通过ref获取组件实例，调用其show()方法（组件内部会触发getMaterialList）
      this.$refs.materialDialog?.show();
      // 同时设置visible为true（双重保障）
      this.showMaterialSelect = true;
    },


    // 物料选择回调（根据组件实际返回字段适配）
    handleMaterialSelect(selectedMaterials) {
      // 组件返回的是数组，取第一个选中的物料
      const material = selectedMaterials[0];
      if (!material) return;

      this.selectedMaterial = material;
      // 字段映射：严格对应MaterialSelectDialog返回的物料字段
      this.form.materialCode = material.materialCode;        // 物料编码
      this.form.productName = material.materialName;        // 物料名称
      this.form.specification = material.specification;      // 规格
      this.form.batchNumber = material.manufacturerBatchNumber; // 厂家批号
      this.form.productionDate = material.receiptDate;       // 收货日期作为生产日期
      this.form.shelfLife = material.expirationDate;         // 有效期至作为保质期
      this.form.storageCondition = material.storageCondition;// 存储条件
    },

    // 留样类型切换
    handleRetentionTypeChange() {
      if (this.form.isRetention === 0) {
        this.form.stabilityRetentionQuantity = null;
        this.form.stabilityRetentionUsed = 0;
        this.form.stabilityRetentionRemaining = 0;
        this.form.stabilityRetentionEndDate = null;
      } else {
        this.form.retentionQuantity = null;
        this.form.retentionUsedQuantity = 0;
        this.form.retentionRemainingQuantity = 0;
        this.form.retentionEndDate = null;
      }
    },
    // 普通留样剩余量计算
    calculateRetentionRemaining() {
      const total = this.form.retentionQuantity || 0;
      const used = this.form.retentionUsedQuantity || 0;
      this.form.retentionRemainingQuantity = Math.max(total - used, 0);
    },
    // 稳定性留样剩余量计算
    calculateStabilityRemaining() {
      const total = this.form.stabilityRetentionQuantity || 0;
      const used = this.form.stabilityRetentionUsed || 0;
      this.form.stabilityRetentionRemaining = Math.max(total - used, 0);
    },
    // 生产指令选择
    handleOrderSelect(order) {
      this.selectedOrder = order;
      this.form.orderId = order.orderCode;
      this.form.productName = order.productName;
      this.form.specification = order.spec;
      this.form.batchNumber = order.batchNumber;
    },

    // 获取列表数据
    getList() {
      this.loading = true
      listSampleRetention(this.queryParams).then(response => {
        this.SampleRetentionList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消
    cancel() {
      this.open = false
      this.reset()
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        sampleId: null,
        retentionId: null,
        sampleDate: null,
        orderId: null,
        sampleType: null,
        materialCode: null,
        productName: null,
        shelfLife: null,
        batchNumber: null,
        productionDate: null,
        specification: null,
        source: null,
        itemsUrl: null,
        storageCondition: null,
        isRetention: 0,
        retentionQuantity: null,
        retentionUsedQuantity: 0,
        retentionRemainingQuantity: 0,
        retentionEndDate: null,
        stabilityRetentionQuantity: null,
        stabilityRetentionUsed: 0,
        stabilityRetentionRemaining: 0,
        stabilityRetentionEndDate: null,
        createdTime: null,
        sampler: null,
        retainer: null,
        remark: null,
        isDelete: 0
      }
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.handleQuery()
    },
    // 选择变化
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 新增
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加取样留样信息"
    },
    // 修改
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getSampleRetention(id).then(response => {
        this.form = {
          ...response.data,
          retentionUsedQuantity: response.data.retentionUsedQuantity || 0,
          retentionRemainingQuantity: response.data.retentionRemainingQuantity || 0,
          stabilityRetentionUsed: response.data.stabilityRetentionUsed || 0,
          stabilityRetentionRemaining: response.data.stabilityRetentionRemaining || 0
        }
        this.open = true
        this.title = "修改取样留样信息"
      })
    },
    // 提交表单
    submitForm() {
      const formData = {
        ...this.form,
        totalQuantity: Number(this.form.totalQuantity) || 0,
        samplingQuantity: Number(this.form.samplingQuantity) || 0,
        isRetention: Number(this.form.isRetention),
        retentionQuantity: Number(this.form.retentionQuantity) || 0,
        retentionUsedQuantity: Number(this.form.retentionUsedQuantity) || 0,
        retentionRemainingQuantity: Number(this.form.retentionRemainingQuantity) || 0,
        stabilityRetentionQuantity: Number(this.form.stabilityRetentionQuantity) || 0,
        stabilityRetentionUsed: Number(this.form.stabilityRetentionUsed) || 0,
        stabilityRetentionRemaining: Number(this.form.stabilityRetentionRemaining) || 0
      }

      // 自动计算剩余量
      if (formData.isRetention === 0) {
        this.calculateRetentionRemaining();
        formData.retentionRemainingQuantity = this.form.retentionRemainingQuantity;
      } else {
        this.calculateStabilityRemaining();
        formData.stabilityRetentionRemaining = this.form.stabilityRetentionRemaining;
      }

      // 提交请求
      if (formData.id != null) {
        updateSampleRetention(formData).then(() => {
          this.$modal.msgSuccess("修改成功")
          this.open = false
          this.getList()
        })
      } else {
        addSampleRetention(formData).then(() => {
          this.$modal.msgSuccess("新增成功")
          this.open = false
          this.getList()
        })
      }
    },
    // 删除
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除选中的数据？').then(() => {
        delSampleRetention(ids).then(() => {
          this.getList()
          this.$modal.msgSuccess("删除成功")
        })
      }).catch(() => { })
    },
    // 导出
    handleExport() {
      this.download('product/SampleRetention/export', { ...this.queryParams }, `SampleRetention_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style scoped>
/* 下载按钮样式 */
.download-link {
  text-decoration: none;
}

.download-btn {
  padding: 0 5px;
  color: #409eff;
}

.download-btn:hover {
  color: #096dd9;
  text-decoration: underline;
}

.no-file {
  color: #999;
  font-size: 13px;
}

/* 表单样式 */
.custom-form {
  padding: 20px;
}

.optimize-form {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 24px;
}

.form-row {
  margin-bottom: 20px;
}

.optimize-form .el-form-item {
  margin-bottom: 16px;
}

.optimize-form .el-form-item:last-child {
  margin-bottom: 0;
}

.optimize-form .el-input,
.optimize-form .el-select,
.optimize-form .el-date-editor,
.optimize-form .el-textarea {
  width: 100%;
  border-radius: 4px;
  transition: all 0.2s;
}

.optimize-form .el-input:hover,
.optimize-form .el-select:hover,
.optimize-form .el-date-editor:hover,
.optimize-form .el-textarea:hover {
  border-color: #409eff;
}

.optimize-form .el-input.is-focus,
.optimize-form .el-select.is-focus,
.optimize-form .el-date-editor.is-focus,
.optimize-form .el-textarea.is-focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.optimize-form .el-button,
.dialog-footer .el-button {
  border-radius: 4px;
  padding: 8px 16px;
  margin-right: 8px;
  transition: opacity 0.2s;
}

.optimize-form .el-button:hover,
.dialog-footer .el-button:hover {
  opacity: 0.9;
}

.optimize-form .el-button:last-child,
.dialog-footer .el-button:last-child {
  margin-right: 0;
}

.optimize-form .el-form-item__help {
  color: #606266;
  font-size: 12px;
  margin-top: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  margin-top: 0;
}

/* 区块标题 */
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
</style>
